Angular Material এর MatTooltip কম্পোনেন্ট ব্যবহার করে সহজেই টুলটিপ তৈরি করা যায়, যা ব্যবহারকারীর মাউসের উপর হভার করলে কোনো উপাদান বা টেক্সট সম্পর্কে সংক্ষিপ্ত তথ্য প্রদর্শন করে। Angular Material এর টুলটিপ কাস্টমাইজ এবং পজিশন করা যায়, যা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে আরও উন্নতি করতে সাহায্য করে।

MatTooltip কম্পোনেন্ট ব্যবহার করা

Angular Material-এ MatTooltip একটি সোজা পদ্ধতিতে ব্যবহার করা যায় এবং এটি কোনো উপাদান বা টেক্সটের উপর হভার করার সাথে সাথে একটি টুলটিপ দেখায়।

১. MatTooltip মডিউল ইমপোর্ট করা

প্রথমে MatTooltipModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    MatTooltipModule
  ]
})
export class AppModule { }

২. MatTooltip ব্যবহার করা

এরপর, HTML ফাইলে আপনি যেকোনো উপাদানে matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ প্রয়োগ করতে পারেন।

<button mat-raised-button matTooltip="Click to save">Save</button>

এখানে:

• mat-raised-button: এটি একটি ম্যাটেরিয়াল বাটন কম্পোনেন্ট।
• matTooltip="Click to save": এটি টুলটিপে প্রদর্শিত টেক্সট।

টুলটিপের পজিশন কাস্টমাইজেশন

MatTooltip এর পজিশন কাস্টমাইজ করা যায়, যাতে আপনি টুলটিপের অবস্থান নির্ধারণ করতে পারেন। Angular Material এর MatTooltip ডিরেকটিভে position প্রপার্টি ব্যবহার করে এটি করা যায়।

১. Position Options

Angular Material এর MatTooltip এর জন্য তিনটি প্রাথমিক পজিশন অপশন রয়েছে:

• above: টুলটিপ উপরে প্রদর্শিত হবে।
• below: টুলটিপ নিচে প্রদর্শিত হবে (ডিফল্ট পজিশন)।
• left: টুলটিপ বামে প্রদর্শিত হবে।
• right: টুলটিপ ডানে প্রদর্শিত হবে।

<button mat-raised-button matTooltip="Tooltip above" matTooltipPosition="above">Save</button>
<button mat-raised-button matTooltip="Tooltip below" matTooltipPosition="below">Save</button>
<button mat-raised-button matTooltip="Tooltip left" matTooltipPosition="left">Save</button>
<button mat-raised-button matTooltip="Tooltip right" matTooltipPosition="right">Save</button>

এখানে, matTooltipPosition এর মাধ্যমে আপনি পজিশন কাস্টমাইজ করছেন। ডিফল্ট পজিশন হচ্ছে below।

টুলটিপের কাস্টমাইজেশন

MatTooltip কম্পোনেন্টের আরও কিছু কাস্টমাইজেশন অপশন রয়েছে, যা আপনাকে টুলটিপের লুক এবং ফাংশনালিটি পরিবর্তন করতে সহায়তা করে।

১. টুলটিপের শো ডিলে (Show Delay)

matTooltipShowDelay প্রপার্টি ব্যবহার করে আপনি টুলটিপের প্রদর্শন বিলম্ব (delay) নির্ধারণ করতে পারেন। এটি টুলটিপের প্রদর্শন বিলম্বে পরিবর্তন আনে, যেমন, ব্যবহারকারী যখন হভার করে তখন কত সময় পর টুলটিপ প্রদর্শিত হবে।

<button mat-raised-button matTooltip="This is a tooltip" matTooltipShowDelay="500">Save</button>

এখানে, টুলটিপ 500 মিলিসেকেন্ড পরে প্রদর্শিত হবে।

২. টুলটিপের হাইড ডিলে (Hide Delay)

matTooltipHideDelay প্রপার্টি ব্যবহার করে আপনি টুলটিপটি মুছে ফেলার বিলম্ব নির্ধারণ করতে পারেন। এটি টুলটিপের অদৃশ্য হওয়ার সময় বিলম্ব নির্ধারণ করে।

<button mat-raised-button matTooltip="This is a tooltip" matTooltipHideDelay="1000">Save</button>

এখানে, টুলটিপ 1000 মিলিসেকেন্ড পরে অদৃশ্য হবে।

৩. টুলটিপের কন্টেন্ট কাস্টমাইজেশন

টুলটিপে কাস্টম কন্টেন্ট বা HTML উপাদান যোগ করতে চাইলে ngTemplateOutlet ব্যবহার করা যায়।

<ng-template #tooltipTemplate>
  <span>Custom Tooltip Content</span>
</ng-template>

<button mat-raised-button [matTooltip]="tooltipTemplate">Save</button>

এখানে, আপনি ng-template ব্যবহার করে কাস্টম কন্টেন্ট তৈরি করছেন এবং সেটি matTooltip এর মাধ্যমে প্রদর্শন করছেন।

৪. টুলটিপের স্টাইল কাস্টমাইজেশন

আপনি CSS বা SCSS ব্যবহার করে টুলটিপের স্টাইল কাস্টমাইজ করতে পারেন। যেমন, টুলটিপের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে:

::ng-deep .mat-tooltip {
  background-color: #ff4081;
  color: white;
  font-size: 14px;
}

এখানে, টুলটিপের ব্যাকগ্রাউন্ড কালার #ff4081 এবং টেক্সটের রং white করা হয়েছে।

টুলটিপের অটোমেটিক পজিশনিং

Angular Material এর MatTooltip কম্পোনেন্টটি অটোমেটিক পজিশনিং সমর্থন করে, যা টুলটিপের পজিশন screen boundary এর উপর ভিত্তি করে সঠিকভাবে নির্ধারণ করে। যদি আপনি টুলটিপের জন্য পজিশন সেট না করেন, তবে এটি স্বয়ংক্রিয়ভাবে সেরা পজিশন নির্বাচন করে।

<button mat-raised-button matTooltip="Auto positioned tooltip">Save</button>

এখানে, পজিশন কাস্টমাইজ না করলেই এটি স্বয়ংক্রিয়ভাবে সঠিক পজিশন (যেমন, উপরে বা নিচে) সেট করে।

Angular Material এর MatTooltip কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য টুলটিপ সমাধান প্রদান করে, যা টুলটিপের পজিশন এবং স্টাইল পরিবর্তন করতে সাহায্য করে। আপনি বিভিন্ন পজিশন (উপর, নিচ, বাম, ডান), বিলম্ব, এবং কাস্টম কন্টেন্ট সেট করতে পারেন। এর মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও ব্যবহারকারী-বান্ধব এবং তথ্যপূর্ণ করা সম্ভব।